<template>
  <div class="phone-login-container">
    <div class="login-form">
      <el-input 
        v-model="phone" 
        placeholder="请输入手机号" 
        class="input-item"
        prefix-icon="Phone"
      ></el-input>
      <div class="code-row">
        <el-input 
          v-model="code" 
          placeholder="请输入验证码" 
          class="input-item"
          prefix-icon="ChatLineRound"
        ></el-input>
        <el-button 
          type="primary" 
          class="code-btn"
          @click="handleGetCode"
          :disabled="countdown > 0"
        >
          {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
        </el-button>
      </div>
      <el-button 
        type="primary" 
        class="login-btn"
        @click="handleLogin"
      >
        登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const phone = ref('');
const code = ref('');
const countdown = ref(0);
const router = useRouter();

// 获取验证码逻辑
const handleGetCode = () => {
  if (!/^1\d{10}$/.test(phone.value)) {
    ElMessage.warning('请输入正确的手机号格式');
    return;
  }
  // 模拟接口请求，实际项目替换为真实接口
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
  ElMessage.success('验证码已发送（模拟）');
};

// 登录逻辑
const handleLogin = () => {
  if (!phone.value || !code.value) {
    ElMessage.warning('请填写完整信息');
    return;
  }
  // 这里可写真实登录接口逻辑
  console.log('手机号:', phone.value, '验证码:', code.value);
  ElMessage.success('登录请求已发送（模拟）');
  localStorage.setItem('isLoggedIn', 'true');
  router.push('/helloworld'); // 登录成功后跳转到首页
};
</script>

<style scoped lang="scss">
.phone-login-container {
  /* 让表单居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  width: 320px;
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.input-item {
  width: 100%;
  margin-bottom: 16px;
}

.code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.code-btn {
  /* 让按钮适配输入框高度 */
  height: 40px; 
  padding: 0 16px;
  white-space: nowrap;
}

.login-btn {
  width: 100%;
}
</style>